<template>
  <div class="app-container">
    <!-- 所属分类 TODO -->
    <el-form label-width="300px">
      <el-form-item label="添加一级标题">
        <el-button type="primary" @click="addOneSubject">新增</el-button>
      </el-form-item>
      <el-form-item label="一级课程分类">
        <el-select v-model="oneSubjectTitle" placeholder="请选择">
          <el-option
            v-for="item in OneSubjectList"
            :key="item.id"
            :label="item.title"
            :value="item.title"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="添加二级标题">
        <el-button type="primary" @click="addTwoSubject">新增</el-button>
      </el-form-item>

      <!-- 添加一级科目 -->
      <el-form-item>
        <el-dialog :visible.sync="dialogOneSubjectFormVisible" title="添加科目">
          <el-form :model="subject" label-width="120px">
            <el-form-item label="一级科目名称">
              <el-input v-model="subject.title" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="科目排序">
              <el-input-number
                v-model="subject.sort"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogOneSubjectFormVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="addSubject">添加</el-button>
          </div>
        </el-dialog>
      </el-form-item>

      <!-- 添加二级科目 -->
      <el-form-item>
        <el-dialog :visible.sync="dialogTwoSubjectFormVisible" title="添加科目">
          <el-form :model="subject" label-width="120px">
            <el-form-item label="当前一级科目">
              <el-input
                placeholder="请输入标题"
                v-model="oneSubjectTitle"
                :disabled="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="二级科目名称">
              <el-input v-model="subject.title" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="科目排序">
              <el-input-number
                v-model="subject.sort"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTwoSubjectFormVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="addSubject">添加</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import subjectApi from "@/api/edu/subject";
export default {
  data() {
    return {
      // 接口API地址,得到dev.env.js文件里面的路径
      BASE_API: process.env.BASE_API,
      // 阿里云OSS地址，从阿里云里面拿到文件模板
      OSS_PATH: process.env.OSS_PATH,
      fileUploadBtnText: "上传到服务器", // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,
      OneSubjectList: [],
      oneSubjectTitle: "",
      dialogOneSubjectFormVisible: false,
      dialogTwoSubjectFormVisible: false,
      subject: {
        parentId: "",
        title: "",
        sort: 1,
      },
    };
  },
  // 页面渲染之前执行这个函数
  created() {
    this.initSubject();
  },
  methods: {
    initSubject() {
      // 初始化一级科目
      subjectApi.getOneLevelSubjects().then((response) => {
        this.OneSubjectList = response.data.oneLevelSubjects;
      });
    },
    // 添加一级科目
    addOneSubject() {
      this.dialogOneSubjectFormVisible = true;
    },
    // 添加二级科目
    addTwoSubject() {
      // 获取一级科目的id  =》 二级科目的父id
      for (let i = 0; i < this.OneSubjectList.length; i++) {
        if ((this.OneSubjectList[i].title = this.oneSubjectTitle)) {
          this.subject.parentId = this.OneSubjectList[i].id;
          break;
        }
      }
      this.dialogTwoSubjectFormVisible = true;
    },
    addSubject() {
      subjectApi.addSubject(this.subject).then((response) => {
        this.$message({
          type: "success",
          message: "添加成功！",
        });
        // 重新初始化
        this.initSubject();
        this.subject.parentId = "";
        this.subject.title = "";
        this.subject.sort = 1;
        this.oneSubjectTitle = "";
        this.dialogOneSubjectFormVisible = false;
      });
    },
  },
};
</script>